window.onload=function(){
	var container=document.getElementById('container');
	var list=document.getElementById('list');
	var buttons=document.getElementById('buttons').getElementsByTagName('span');
	var prev=document.getElementById('prev');
	var next=document.getElementById('next');
	var index=1;
	var timer;
	
	 function animate(offset) {
             //list.style.left相对左边距
               var newLeft = parseInt(list.style.left) + offset;
               list.style.left = newLeft + 'px';
             
               if (newLeft > -600) {
                   list.style.left = -3000 + 'px';
               }
               if (newLeft < -3000) {
                    list.style.left = -600 + 'px';
                }
             }
	
	function play(){
		timer=setInterval(function(){
			next.onclick();
		},2000)
	}
	
	function stop(){
		clearInterval(timer);
	}
	function buttonShow(){
		for(var i=0; i< buttons.length;i++){
			if(buttons[i].className=="on"){
				buttons[i].className="";
			}
			
		}
		buttons[index-1].className="on";
	}
	prev.onclick=function(){
		index-=1;
		if(index<1){
			index=5;
		}
		buttonShow();
		animate(600);
	};
	next.onclick=function(){
		index+=1;
		if(index>5)
		{
			index=1
		}
		buttonShow();
		animate(-600);
	};
	
	var x = 0;
	
	for(var i=0;i<buttons.length;i++){//let 为代码块for的作用域,保存i的值
		//立即执行函数
//		setTimeout(function(){
//			console.log(i);
//		},1000);
       buttons[i].onclick=function(){
				var clickIndex=parseInt(this.getAttribute('index'));//获取index属性
				var offset=600*(index-clickIndex);
				animate(offset);
				index=clickIndex;
				buttonShow();
		        }
		console.log(i);
//		}
//		console.log(i);
//		function f1(i){
//		var i =i;
//		function f2(){
//			buttons[i].onclick=function(){
//				var clickIndex=parseInt(this.getAttribute('index'));//获取index属性
//				var offset=600*(index-clickIndex);
//				animate(offset);
//				index=clickIndex;
//				buttonShow();
//		        }
//			
//		   }
//		
//		}
//		
//		
//		(function(i){
//			buttons[i].onclick=function(){
//				var clickIndex=parseInt(this.getAttribute('index'));//获取index属性
//				var offset=600*(index-clickIndex);
//				animate(offset);
//				index=clickIndex;
//				buttonShow();
//			}
//			console.log(i);
//		})(i)//立即调用函数
		
	}
	
	container.onmouseover=stop;
	container.onmouseout=play;
	play();
}